<template>
  <div>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :success-text="message"
    >
      <div class="header">
        <van-icon size="16px" name="arrow-left" @click="goback" />
        <div class="title">二手房</div>
        <div style="flex: 1" />
        <van-icon size="15px" name="location-o" />
        <div style="font-size: 13px; margin-left: 2px" @click="tobuycity">
          {{ city ? city.slice(0, 3) : "" }}
        </div>
      </div>
      <div class="space" />
      <div class="menu">
        <div class="part">
          <div @click="jumptomap">
            <img src="@/assets/buyindexicon01.png" />
            <span>地图找房</span>
          </div>
          <div @click="jumptoquery">
            <img src="@/assets/buyindexicon02.png" />
            <span>查房价</span>
          </div>
          <div @click="jumptocompute">
            <img src="@/assets/buyindexicon03.png" />
            <span>房贷计算</span>
          </div>
        </div>
      </div>
      <div class="service" style="color: rgba(0, 0, 0, 0.603)">
        <div class="onebox" @click="jumptoserve">
          <div><span>业主</span>服务</div>
          <div>房屋在线估价 快速委托</div>
        </div>
        <div class="twobox" @click="jumptoshow">
          <div><span>经纪人</span>入驻</div>
          <div>加入暖暖获得更多收益</div>
        </div>
      </div>
      <div class="atwill">
        <div>
          <div><span>买家</span>定制化服务</div>
          <div>* 为您快速匹配在售房源</div>
          <div>* 为您快速匹配符合偏好的经纪人</div>
        </div>
        <button @click="jumptoseek">发布需求</button>
      </div>
      <div class="tip"><span />最新上架</div>
      <div class="sorthouse" v-if="houselist.length != 0">
        <van-sticky :offset-top="46">
          <div ref="screen" class="navtab">
            <div @click="showscreen($event)">
              {{ value1 }}<van-icon size="13" name="arrow-down" />
              <div class="content" v-if="show">
                <van-tree-select
                  :items="items"
                  :active-id.sync="activeId"
                  :main-active-index.sync="activeIndex"
                  @click-item="areachoose"
                />
                <div class="btnarea">
                  <van-button @click="clear">关闭</van-button>
                  <van-button @click="jumptoscreen">确定</van-button>
                </div>
              </div>
            </div>
            <div @click="showscreen($event)">
              {{ value2 }}<van-icon size="13" name="arrow-down" />
              <div class="content" v-if="show">
                <div class="moneybox">
                  <div
                    v-for="item in moneylist"
                    :key="item"
                    ref="moneylist"
                    @click="moenychoose($event)"
                  >
                    {{ item }}
                  </div>
                </div>
                <div class="btnarea">
                  <van-button @click="clear">关闭</van-button>
                  <van-button @click="jumptoscreen">确定</van-button>
                </div>
              </div>
            </div>
            <div @click="showscreen($event)">
              {{ value3 }}<van-icon size="13" name="arrow-down" />
              <div class="content" v-if="show">
                <div class="moneybox">
                  <div
                    v-for="item in roomlist"
                    :key="item"
                    ref="roomlist"
                    @click="labchoose($event)"
                  >
                    {{ item }}
                  </div>
                </div>
                <div class="btnarea">
                  <van-button @click="clear">关闭</van-button>
                  <van-button @click="jumptoscreen">确定</van-button>
                </div>
              </div>
            </div>
            <div @click="showscreen($event)">
              {{ value4 }}<van-icon size="13" name="arrow-down" />
              <div class="content" v-if="show">
                <div class="sortbox">
                  <div
                    v-for="item in sortlist"
                    :key="item"
                    ref="sortlist"
                    @click="sortchoose($event)"
                  >
                    {{ item }}
                  </div>
                </div>
                <div class="btnarea">
                  <van-button @click="clear">关闭</van-button>
                  <van-button @click="jumptoscreen">确定</van-button>
                </div>
              </div>
            </div>
          </div>
        </van-sticky>
      </div>
      <div v-show="houselist.length != 0" class="newup">
        <div
          v-for="(item, index) in houselist"
          :key="index"
          class="house"
          @click="jumptobuydetail(item.houseId, item)"
        >
          <van-image
            width="121px"
            height="112px"
            lazy-load
            :src="item.houseImage"
            fit="cover"
            radius="5px"
          />
          <div class="intrduce">
            <div class="title1">{{ item.subdistrict }}</div>
            <div class="title2">
              <span>{{ item.houseType }}</span
              >|<span>{{ item.coveredArea }}m<span class="up">2</span></span
              >|<span>{{ item.floor }}</span>
            </div>
            <div class="tips">
              <span v-if="item.address">{{ item.address }}</span>
              <!-- <span v-show="item.aspectType">{{ item.aspectType }}</span>
              <span v-show="item.decoration">{{ item.decoration }}</span>
              <span v-show="item.houseGenre">{{ item.houseGenre }}</span> -->
            </div>
            <div v-show="item.listedPrice != '面议'" class="title3">
              {{ item.listedPrice }}万<span>
                <span
                  >{{
                    ((item.listedPrice * 10000) / item.coveredArea).toFixed(2)
                  }} </span
                >元/m<span class="up">2</span></span
              >
            </div>
            <div v-show="item.listedPrice == '面议'" class="title3">
              {{ item.listedPrice }}
            </div>
          </div>
        </div>
      </div>
      <div v-show="houselist.length == 0 && !erloading" class="nohouse">
        <img src="@/assets/nohouse.png" alt="" />
        <div>房源上新中...</div>
      </div>
      <div v-show="erloading" class="nohouse">
        <img src="@/assets/nohouse.png" alt="" />
        <div>加载中...</div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getBuyhouselist } from "@/apis/house.js";
import local from "@/utils/local";
import { baseUtils } from "@/utils/baseUtils";
import { _local } from "@/utils/storage";
import {
  getChooseCityQualify,
  getGeolocation,
  getChooseCity,
  getHouseListBuy,
  setHouseListBuy,
  getUserId,
} from "@/utils/auth";
import { getAreaList } from "@/apis/city";
import { addLog } from "@/apis/user";

export default {
  data() {
    return {
      message: "",
      isLoading: true,
      value1: "区域",
      value2: "价格",
      value3: "户型",
      value4: "更多",
      erloading: true,
      city: "",
      cityCode: "",
      currentPage: 1,
      perPage: 10,
      show: false,
      houselist: [],
      searchdata: { currentPage: 1, perPage: 10 },
      activeId: 0,
      activeIndex: 0,
      items: [
        {
          text: "区域",
          children: [],
        },
      ],
      roomlist: [
        "不限",
        "1室1厅1卫",
        "1室2厅1卫",
        "2室1厅1卫",
        "2室2厅1卫",
        "3室1厅1卫",
        "3室1厅2卫",
        "3室2厅1卫",
        "3室2厅2卫",
        "4室1厅1卫",
        "4室1厅2卫",
        "4室2厅1卫",
        "4室2厅2卫",
      ],
      moneylist: [
        "不限",
        "<50万",
        "50万~100万",
        "100万~150万",
        "150万~200万",
        "200万~250万",
        "250万~300万",
        ">300万",
      ],
      sortlist: [
        "默认排序",
        "价格由高到低",
        "价格由低到高",
        "面积从小到大",
        "面积从大到小",
        "业主挂牌",
        "经纪人挂牌",
      ],
      arealist: [],
      loading: false,
      screen: false,
    };
  },
  created() {
    this.city = _local.get("city");
    this.cityCode = _local.get("cityCode");
    // const chooseCityQualify = getChooseCityQualify();
    // if (!baseUtils.isEmpty(chooseCityQualify)) {
    //   this.city = chooseCityQualify.city;
    //   this.cityCode = chooseCityQualify.cityCode;
    // } else {
    //   const chooseCity = getChooseCity();
    //   const geolocation = getGeolocation();
    //   this.city = chooseCity ? chooseCity.city : geolocation.city;
    //   this.cityCode = chooseCity ? chooseCity.cityCode : geolocation.cityCode;
    // }

    // if (
    //   this.city === "北京市" ||
    //   this.city === "上海市" ||
    //   this.city === "广州市" ||
    //   this.city === "深圳市" ||
    //   this.city === "杭州市" ||
    //   this.city === "武汉市" ||
    //   this.city === "长沙市" ||
    //   this.city === "宁波市"
    // ) {
    //   this.erloading = false;
    //   this.$dialog
    //     .alert({
    //       message: "当前城市暂未开放二手房交易服务",
    //       confirmButtonColor: "#45b7cb",
    //       theme: "round-button",
    //     })
    //     .then(() => {});
    // }
    this.getHouse();
    this.screen = true;
    this.getdis();
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
  methods: {
    onRefresh() {
      getBuyhouselist({
        citycode: this.cityCode,
        currentPage: this.currentPage,
        perPage: this.perPage,
      }).then((response) => {
        if (response.code == 201 || response.code == 200) {
          this.houselist = response.result.list;
          if (this.houselist.length === 10) {
            this.loading = true;
          } else {
            this.erloading = false;
          }
          this.isLoading = false;
          this.message = "刷新成功";
          this.$toast("刷新成功");
        } else {
          this.isLoading = false;
          this.message = "刷新失败";
          this.$toast("刷新失败");
        }
      });
    },
    go() {
      this.$router.push("/buyscreen");
    },
    goback() {
      this.$router.push({ path: "/home/index" });
    },
    async getdis() {
      await getAreaList({
        citycode: _local.get("cityCode"),
      }).then((res) => {
        console.log("getAreaList", res);
        if (
          this.city === "上海市" ||
          this.city === "北京市" ||
          this.city === "天津市" ||
          this.city === "重庆市"
        ) {
          this.arealist = res.result.list.slice(1);
          this.arealist.forEach((e) => {
            const obj = {};
            obj.text = e.name;
            obj.id = e.adcode;
            this.items[0].children.push(obj);
          });
        } else {
          this.arealist = res.result.list.slice(2);
          this.arealist.forEach((e) => {
            const obj = {};
            obj.text = e.name;
            obj.id = e.adcode;
            this.items[0].children.push(obj);
          });
        }
      });
    },
    jumptobuydetail(e, item) {
      const list = getHouseListBuy();
      for (let i = 0; i < list.length; i++) {
        if (list[i].houseId === item.houseId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      setHouseListBuy(list);
      this.$router.push({ path: "/buyhousedetail", query: { houseId: e } });
    },
    tobuycity() {
      // console.log('here')
      this.$router.push({ path: "/city", query: { city: this.city } });
    },
    jumptomap() {
      if (this.screen) {
        // this.$router.push({ path: "/buymap" });
        this.$toast("功能更新中，敬请期待");
      } else {
        this.$dialog
          .alert({
            message: "当前城市暂未开放二手房交易服务",
            confirmButtonColor: "#45b7cb",
            theme: "round-button",
            messageAlign: "left",
          })
          .then(() => {});
      }
    },
    jumptocompute() {
      this.$router.push({ path: "/buycompute" });
    },
    jumptoquery() {
      if (this.screen) {
        this.$router.push({ path: "/buyquery" });
      } else {
        this.$dialog
          .alert({
            message: "当前城市暂未开放二手房交易服务",
            confirmButtonColor: "#45b7cb",
            theme: "round-button",
            messageAlign: "left",
          })
          .then(() => {});
      }
    },
    jumptoseek() {
      const userId = getUserId();
      if (userId) {
        if (_local.get("role") != 5) {
          this.$dialog
            .confirm({
              title: "温馨提示",
              className: "leftpart",
              confirmButtonText: "切换身份",
              confirmButtonColor: "#45b7cb",
              cancelButtonText: "暂不切换",
              message:"请切换买家身份再发布购房定制需求单",
              messageAlign: "left",
            })
            .then(() => {
              this.$router.push({ path: "/rolechoose" });
            })
            .catch(() => {});
        } else {
          this.$router.push({ path: "/buyseek" });
        }
      } else {
        this.$router.push("/login");
      }
    },
    jumptoserve() {
      if (this.screen) {
        this.$router.push({ path: "/buyownerserve" });
      } else {
        this.$dialog
          .alert({
            message: "当前城市暂未开放二手房交易服务",
            confirmButtonColor: "#45b7cb",
            theme: "round-button",
            messageAlign: "left",
          })
          .then(() => {});
      }
    },
    jumptoshow() {
      this.$router.push({ path: "/graborder", query: { city: this.city } });
    },
    jumptoscreen() {
      if (this.screen) {
        addLog({
          adcode: _local.get("adCode"),
          code: "click",
          page_name: "二手房筛选一级页面",
          system: _local.get("device"),
          uid: _local.get("ryId"),
          describe: `筛选条件:${this.value1},${this.value2},${this.value3},${
            this.value4
          },城市:${_local.get("city")}`,
        }).then((res) => {});
        local.set("searchdata", JSON.stringify(this.searchdata));
        this.$router.push({
          path: "/buyscreen",
          query: {
            value1: this.value1,
            value2: this.value2,
            value3: this.value3,
            value4: this.value4,
          },
        });
      } else {
        this.$dialog
          .alert({
            message: "当前城市暂未开放二手房交易服务",
            confirmButtonColor: "#45b7cb",
            theme: "round-button",
            messageAlign: "left",
          })
          .then(() => {});
      }
    },
    clear() {
      this.$refs.screen.children.forEach((v) => {
        v.classList.remove("active");
      });
    },
    showscreen(e) {
      this.show = true;
      if (e.currentTarget === e.target) {
        if (e.currentTarget.classList[0] === "active") {
          e.currentTarget.classList.remove("active");
        } else {
          this.$refs.screen.children.forEach((v) => {
            v.classList.remove("active");
          });
          e.currentTarget.classList.add("active");
        }
      }
    },
    labchoose(event) {
      this.value3 = event.currentTarget.innerText.slice(0, 2);
      if (event.currentTarget.classList[0] === "mboxactive") {
        event.currentTarget.classList.remove("mboxactive");
        this.searchdata.houseType = "0";
      } else {
        this.$refs.roomlist.forEach((e) => {
          e.classList.remove("mboxactive");
        });
        if (event.target.innerText === "1室1厅1卫") {
          this.searchdata.houseType = "1";
        } else if (event.target.innerText === "1室2厅1卫") {
          this.searchdata.houseType = "2";
        } else if (event.target.innerText === "2室1厅1卫") {
          this.searchdata.houseType = "3";
        } else if (event.target.innerText === "2室2厅1卫") {
          this.searchdata.houseType = "4";
        } else if (event.target.innerText === "3室1厅1卫") {
          this.searchdata.houseType = "5";
        } else if (event.target.innerText === "3室1厅2卫") {
          this.searchdata.houseType = "6";
        } else if (event.target.innerText === "3室2厅1卫") {
          this.searchdata.houseType = "7";
        } else if (event.target.innerText === "3室2厅2卫") {
          this.searchdata.houseType = "8";
        } else if (event.target.innerText === "4室1厅1卫") {
          this.searchdata.houseType = "9";
        } else if (event.target.innerText === "4室1厅2卫") {
          this.searchdata.houseType = "10";
        } else if (event.target.innerText === "4室2厅1卫") {
          this.searchdata.houseType = "11";
        } else if (event.target.innerText === "4室2厅2卫") {
          this.searchdata.houseType = "12";
        } else if (event.target.innerText === "不限") {
          this.searchdata.houseType = "";
        }
        event.currentTarget.classList.add("mboxactive");
      }
    },
    moenychoose(e) {
      this.value2 = e.currentTarget.innerText.slice(0, 2);
      if (e.currentTarget.classList[0] === "mboxactive") {
        e.currentTarget.classList.remove("mboxactive");
        this.searchdata.priceMin = "1";
        this.searchdata.priceMax = "1000000";
      } else {
        this.$refs.moneylist.forEach((e) => {
          e.classList.remove("mboxactive");
        });
        if (e.target.innerText === "<50万") {
          this.searchdata.priceMin = "1";
          this.searchdata.priceMax = "50";
        } else if (e.target.innerText === "50万~100万") {
          this.searchdata.priceMin = "50";
          this.searchdata.priceMax = "100";
        } else if (e.target.innerText === "100万~150万") {
          this.searchdata.priceMin = "100";
          this.searchdata.priceMax = "150";
        } else if (e.target.innerText === "150万~200万") {
          this.searchdata.priceMin = "150";
          this.searchdata.priceMax = "200";
        } else if (e.target.innerText === "200万~250万") {
          this.searchdata.priceMin = "200";
          this.searchdata.priceMax = "250";
        } else if (e.target.innerText === "250万~300万") {
          this.searchdata.priceMin = "250";
          this.searchdata.priceMax = "300";
        } else if (e.target.innerText === ">300万") {
          this.searchdata.priceMin = "300";
          this.searchdata.priceMax = "10000000";
        } else if (e.target.innerText === "不限") {
          this.searchdata.priceMin = "1";
          this.searchdata.priceMax = "1000000000";
        }
        e.currentTarget.classList.add("mboxactive");
      }
    },
    sortchoose(e) {
      this.value4 = e.currentTarget.innerText.slice(0, 2);
      if (e.currentTarget.classList[0] === "mboxactive") {
        e.currentTarget.classList.remove("mboxactive");
      } else {
        this.$refs.sortlist.forEach((e) => {
          e.classList.remove("mboxactive");
        });
        e.currentTarget.classList.add("mboxactive");
        if (e.target.innerText === "价格由高到低") {
          this.searchdata.price = "1";
          this.searchdata.acre = "0";
          this.searchdata.order = "1";
        } else if (e.target.innerText === "价格由低到高") {
          this.searchdata.price = "1";
          this.searchdata.acre = "0";
          this.searchdata.order = "2";
        } else if (e.target.innerText === "面积从小到大") {
          this.searchdata.price = "0";
          this.searchdata.acre = "1";
          this.searchdata.order = "2";
        } else if (e.target.innerText === "面积从大到小") {
          this.searchdata.price = "0";
          this.searchdata.acre = "1";
          this.searchdata.order = "1";
        } else if (e.target.innerText === "默认排序") {
          this.searchdata.price = "0";
          this.searchdata.acre = "0";
          this.searchdata.order = "0";
        } else if (e.target.innerText === "业主挂牌") {
          this.searchdata.release_role = "2";
        } else if (e.target.innerText === "经纪人挂牌") {
          this.searchdata.release_role = "1";
        }
      }
    },
    getHouse() {
      getBuyhouselist({
        citycode: this.cityCode,
        currentPage: this.currentPage,
        perPage: this.perPage,
      }).then((response) => {
        console.log(response);
        this.houselist = response.result.list;
        if (this.houselist.length === 10) {
          this.loading = true;
        } else {
          this.erloading = false;
        }
      });
    },
    showScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.currentPage++;

        getBuyhouselist({
          citycode: this.cityCode,
          currentPage: this.currentPage,
          perPage: this.perPage,
        }).then((response) => {
          if (response.result.list.length !== 10) {
            this.loading = false;
          }
          this.houselist = [...this.houselist, ...response.result.list];
        });
      }
    },
    areachoose(data) {
      this.value1 = data.text.slice(0, 2);
      this.searchdata.adcode = data.id;
    },
  },
};
</script>

<style scoped lang="less">
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  background-color: #fff;
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  .title {
    line-height: 25px;
    height: 25px;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
    span {
      line-height: 25px;
      height: 25px;
      display: inline-block;
      font-size: 11px;
      color: #ccc;
      margin-left: 5px;
    }
  }
}
.space {
  height: 50px;
}
.banner {
  box-sizing: border-box;
  padding: 10px 15px;
  img {
    width: 100%;
  }
}
.menu {
  margin-bottom: 10px;
  padding: 0 15px;
  .part {
    background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 0;
    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      color: #333;
      img {
        margin-bottom: 5px;
        width: 40px;
        height: 40px;
      }
    }
  }
}
.service {
  margin: 0 15px;
  display: flex;
  justify-content: space-between;
  > div {
    width: 48%;
    height: 90px;
    font-size: 12px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    div {
      &:first-child {
        font-weight: bold;
        span {
          font-size: 20px;
        }
      }
    }
  }
  .onebox {
    background: url("../../assets/buy02.png") no-repeat 0px 0px;
    background-size: 100% 100%;
  }
  .twobox {
    background: url("../../assets/buy03.png") no-repeat 0px 0px;
    background-size: 100% 100%;
  }
}
.atwill {
  margin: 20px 15px;
  height: 100px;
  background-color: #dff4f8;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 15px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  > div {
    font-weight: bold;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    div {
      &:first-child {
        color: #58bbcd;
        font-size: 15px;
        span {
          margin-right: 5px;
          font-size: 18px;
          color: #45b7cb;
        }
      }
      &:nth-child(2),
      &:last-child {
        color: #333;
        font-size: 13px;
      }
    }
  }
  > button:active {
    background-color: #45b7cb7c;
  }
  > button {
    border: none;
    border-radius: 19px;
    background-color: #45b7cb;
    color: #fff;
    margin-right: 10px;
    font-size: 15px;
    padding: 7px 15px;
  }
}
.navtab {
  background-color: #fff;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  font-size: 14px;
  .content {
    background-color: #fff;
    position: absolute;
    width: 100%;
    top: 40px;
    left: 0;
    z-index: 10000;
    color: #000;
    display: none;
    .way {
      margin: 15px 20px 10px;
      font-size: 14px;
      span {
        display: inline-block;
        text-align: center;
        width: 70px;
        line-height: 35px;
        height: 35px;
        background-color: #fff;
        color: #46b8cb;
        border: 1px solid #46b8cb;
        border-radius: 5px;
        margin-right: 10px;
        margin-top: 5px;
      }
      .chooseactive {
        background-color: #46b8cb;
        color: #fff;
      }
      .tipwords {
        font-size: 13px;
        font-weight: bold;
        margin: 10px 0;
      }
    }
    .btnarea {
      .van-button {
        font-size: 16px;
        &:first-child {
          width: 35%;
          background-color: #fff;
          border: none;
        }
        &:last-child {
          width: 65%;
          background-color: #46b8cb;
          color: #fff;
        }
      }
    }
    .moneybox,
    .sortbox {
      text-align: center;
      font-size: 14px;
      height: 300px;
      overflow-y: scroll;
      div {
        height: 40px;
        line-height: 40px;
      }
      .mboxactive {
        color: #46b8cb;
      }
    }
  }
  .active {
    color: #d43b33;
    .content {
      display: block;
    }
  }
}
.tip {
  background-color: #fff;
  margin: 0 15px;
  padding: 10px 0;
  span {
    display: inline-block;
    width: 5px;
    height: 15px;
    background-color: #d43b33;
    margin-right: 5px;
    vertical-align: middle;
  }
}
.house {
  background-color: #fff;
  margin: 0 15px;
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #f1f1f1;
  img {
    width: 121px;
    height: 112px;
    min-width: 121px;
    max-width: 121px;
    border-radius: 5px;
  }
  .intrduce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .title1 {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
    .title2 {
      font-size: 12px;
      color: #a0a0a0;
      span {
        margin: 0 2px;
      }
    }
    .tips {
      span {
        font-size: 10px;
        display: inline-block;
        margin-right: 5px;
        padding: 3px;
        border: 0;
        background-color: #ebfafd;
        color: #5eb9d0;
        border-radius: 5px;
      }
    }
    .title3 {
      color: #d43b33;
      font-size: 16px;
      font-weight: bold;
      span {
        color: #999;
        font-size: 12px;
        margin-left: 6px;
      }
    }
  }
  .up {
    margin: 0px !important;
    font-size: 12px;
    vertical-align: super;
    transform: scale(calc(10 / 12));
  }
}
.nohouse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 15px;
  padding-bottom: 30px;
  img {
    margin-top: 20px;
    width: 200px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
/deep/.van-dialog {
  z-index: 10000 !important;
}
</style>
